<template>
  <div class="site-category">
    <div class="category-list">
      <div class="category-list-item">
        <el-popover
          ref="popover1"
          placement="right"
          width="950"
          trigger="hover"
          :close-delay="0"
        >
          <div class="popover-item-list">
            <router-link
              :to="{ path: '/item', query: { id: 5 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item5/img1.png"
                alt=""
              />
              <p class="popover-item-title">Xiaomi 12 Pro</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 7 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item7/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">Xiaomi 11 Pro</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 6 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item6/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">Redmi K40</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 1 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item1/img1.png"
                alt=""
              />
              <p class="popover-item-title">Xiaomi 11 青春活力版</p>
            </router-link>
          </div>
        </el-popover>
        <el-button v-popover:popover1>手机</el-button>
      </div>
      <div class="category-list-item">
        <el-popover
          ref="popover2"
          placement="right"
          width="950"
          trigger="hover"
          :close-delay="0"
        >
          <div class="popover-item-list">
            <router-link
              :to="{ path: '/item', query: { id: 8 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item8/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">Redmi X65 2022款</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 9 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item9/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">小米电视6 至尊版 55英寸</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 10 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item10/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">小米电视 ES75 2022款</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 11 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item11/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">Redmi 智能电视 X55</p>
            </router-link>
          </div>
        </el-popover>
        <el-button v-popover:popover2>电视</el-button>
      </div>
      <div class="category-list-item">
        <el-popover
          ref="popover3"
          placement="right"
          width="950"
          trigger="hover"
          :close-delay="0"
        >
          <div class="popover-item-list">
            <router-link
              :to="{ path: '/item', query: { id: 2 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item2/img1.png"
                alt=""
              />
              <p class="popover-item-title">小米平板5</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 12 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item12/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">RedmiBook Pro 14 增强版</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 14 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item10/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">小米平板5 Pro</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 13 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item13/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">Redmibook Pro 14 锐龙版</p>
            </router-link>
          </div>
        </el-popover>
        <el-button v-popover:popover3>笔记本 平板</el-button>
      </div>
      <div class="category-list-item">
        <el-popover
          ref="popover4"
          placement="right"
          width="950"
          trigger="hover"
          :close-delay="0"
        >
          <div class="popover-item-list">
            <router-link
              :to="{ path: '/item', query: { id: 3 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item3/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">米家波轮洗衣机尊享版</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 4 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item4/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">米家防缠绕扫拖机器人</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 15 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item15/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">米家互联网对开门冰箱 540L</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 16 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item16/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">米家冰箱 尊享版550L十字四门</p>
            </router-link>
          </div>
        </el-popover>
        <el-button v-popover:popover4>家电</el-button>
      </div>
      <div class="category-list-item">
        <el-popover
          ref="popover5"
          placement="right"
          width="950"
          trigger="hover"
          :close-delay="0"
        >
          <div class="popover-item-list">
            <router-link
              :to="{ path: '/item', query: { id: 17 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item17/img1.png"
                alt=""
              />
              <p class="popover-item-title">Xiaomi Watch S1</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 18 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item18/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">
                HIMO Z20 折叠电动助力自行车 便携电动车
              </p>
            </router-link>
          </div>
        </el-popover>
        <el-button v-popover:popover5>出行 穿戴</el-button>
      </div>
      <div class="category-list-item">
        <el-popover
          ref="popover6"
          placement="right"
          width="950"
          trigger="hover"
          :close-delay="0"
        >
          <div class="popover-item-list">
            <router-link
              :to="{ path: '/item', query: { id: 19 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item19/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">小米路由器AX9000</p>
            </router-link>
          </div>
        </el-popover>
        <el-button v-popover:popover6>智能 路由器</el-button>
      </div>
      <div class="category-list-item">
        <el-popover
          ref="popover7"
          placement="right"
          width="950"
          trigger="hover"
        >
          <div class="popover-item-list">
            <router-link
              :to="{ path: '/item', query: { id: 20 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item20/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">小米充电宝 20000mAh 50W</p>
            </router-link>
          </div>
        </el-popover>
        <el-button v-popover:popover7>电源 配件</el-button>
      </div>
      <div class="category-list-item">
        <el-popover
          ref="popover8"
          placement="right"
          width="950"
          trigger="hover"
          :close-delay="0"
        >
          <div class="popover-item-list">
            <router-link
              :to="{ path: '/item', query: { id: 21 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item21/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">米家跑步机</p>
            </router-link>
          </div>
        </el-popover>
        <el-button v-popover:popover8>健康 儿童</el-button>
      </div>
      <div class="category-list-item">
        <el-popover
          ref="popover9"
          placement="right"
          width="950"
          trigger="hover"
          :close-delay="0"
        >
          <div class="popover-item-list">
            <router-link
              :to="{ path: '/item', query: { id: 22 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item22/img1.png"
                alt=""
              />
              <p class="popover-item-title">Xiaomi真无线降噪耳机3</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 24 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item24/img1.png"
                alt=""
              />
              <p class="popover-item-title">Redmi Buds 3 青春版</p>
            </router-link>
            <router-link
              :to="{ path: '/item', query: { id: 25 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item25/img1.png"
                alt=""
              />
              <p class="popover-item-title">Redmi Buds 3</p>
            </router-link>
          </div>
        </el-popover>
        <el-button v-popover:popover9>耳机 音箱</el-button>
      </div>
      <div class="category-list-item">
        <el-popover
          ref="popover10"
          placement="right"
          width="950"
          trigger="hover"
          :close-delay="0"
        >
          <div class="popover-item-list">
            <router-link
              :to="{ path: '/item', query: { id: 23 } }"
              class="popover-item"
            >
              <img
                class="popover-item-img"
                src="@/assets/img/item/item23/img1.jpg"
                alt=""
              />
              <p class="popover-item-title">小米小背包</p>
            </router-link>
          </div>
        </el-popover>
        <el-button v-popover:popover10>生活 箱包</el-button>
      </div>
    </div>
    <div class="swiper">
      <el-carousel :interval="3000" height="460px">
        <el-carousel-item v-for="item in swiperImgUrl" :key="item.id">
          <router-link :to="{ path: '/item', query: { id: item.id } }">
            <img class="swiper-img" :src="item.url" alt="" />
          </router-link>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "SiteCategory",
  data() {
    return {
      swiperImgUrl: [
        { id: 5, url: require("@/assets/img/banner/banner1.jpg") },
        { id: 2, url: require("@/assets/img/banner/banner2.jpg") },
        { id: 3, url: require("@/assets/img/banner/banner3.png") },
        { id: 4, url: require("@/assets/img/banner/banner4.jpg") },
      ],
    };
  },
  methods: {
    getBannerUrl(url) {
      console.log(url);
      return url;
    },
  },
};
</script>

<style scoped>
.site-category {
  margin-top: 40px;
  height: 460px;
  display: flex;
}

.category-list {
  flex: 2;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
.category-list-item {
  flex: 1;
}
.popover-item-list {
  display: flex;
}
.popover-item {
  flex: 3;
  display: flex;
  align-items: center;
}
.popover-item-img {
  width: 60px;
  height: 60px;
}
.popover-item-title {
  margin-left: 8px;
}
.el-popover__reference {
  width: 250px;
  height: 42px;
  border: 0;
  border-radius: 0;
}

.swiper {
  flex: 8;
}
.swiper-img {
  width: 1000px;
  height: 460px;
}
</style>